<template>
  <!-- 重置弹窗样式
  所有配置属性与el-dialog一致，缺少的属性可自行新增
 -->
  <div class="re-modal-box">
    <el-dialog
      v-if="visible"
      :visible.sync="visible"
      :custom-class="customClass"
      :title="title"
      :width="width"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      :append-to-body="appendToBody"
      :show-close="showClose"
      :before-close="beforeClose"
      :destroy-on-close="true"
    >
      <!-- 弹窗自定义内容dom -->
      <div class="child-dom-box">
        <slot name="childDom"></slot>
      </div>
      <!-- 弹窗默认按钮 -->
      <div v-if="footer" class="footer-box">
        <el-button v-if="showHidebutton" size="small" @click="onHide"
          >取 消</el-button
        >
        <el-button
          v-if="showOkbutton"
          :loading="isLoading"
          type="primary"
          size="small"
          @click="onOk"
          >{{ confirmBtnText }}</el-button
        >
        <slot name="handleBtn"></slot>
      </div>
      <!-- 弹窗按钮自定义dom -->
      <slot name="footer"></slot>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ReModal",
  props: {
    // 弹框标题
    title: {
      type: String,
      require: false,
      default: "-",
    },
    // 添加按钮loading
    isLoading: {
      type: Boolean,
      require: false,
      default: false,
    },
    // 弹框控制显示隐藏
    visible: {
      type: Boolean,
      require: false,
      default: false,
    },
    //是否展示底部按钮
    footer: {
      type: Boolean,
      require: false,
      default: true,
    },
    //弹框宽度
    width: {
      type: String,
      require: false,
      default: "50%",
    },
    //弹框样式
    customClass: {
      type: String,
      require: false,
      default: "re-dialog-box",
    },
    //是否可以通过点击 modal 关闭 Dialog
    closeOnClickModal: {
      type: Boolean,
      require: false,
      default: false,
    },
    //是否可以通过按下 ESC 关闭 Dialog
    closeOnPressEscape: {
      type: Boolean,
      require: false,
      default: false,
    },

    //弹框是否展示确定按钮，默认展示
    showOkbutton: {
      type: Boolean,
      required: false,
      default: true,
    },
    showHidebutton: {
      type: Boolean,
      required: false,
      default: true,
    },

    //Dialog 自身是否插入至 body 元素上   注意：嵌套的 Dialog 必须指定该属性并赋值为 true
    appendToBody: {
      type: Boolean,
      require: false,
      default: false,
    },

    // 确定按钮自定义文本
    confirmBtnText: {
      type: String,
      require: false,
      default: "确定",
    },

    //是否显示关闭按钮
    showClose: {
      type: Boolean,
      require: false,
      default: true,
    },

    //弹框是否展示loading
    isLoading: {
      type: Boolean,
      require: false,
      default: false,
    },

    //关闭前的回调，会暂停 Dialog 的关闭
    beforeClose: {
      type: Function,
      require: false,
      default: () => {
        return () => {};
      },
    },

    //点击取消执行的回调函数
    onHide: {
      type: Function,
      require: false,
      default: () => {
        return () => {};
      },
    },

    //点击确定执行的回调函数
    onOk: {
      type: Function,
      require: false,
      default: () => {
        return () => {};
      },
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style scoped lang="scss" src="./index.scss"></style>
